<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>张三</td>
                <td>17</td>
                <td>男</td>
                <td>0</td>
                <td>删除</td>
            </tr> -->
        </tbody>
    </table>

    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <button>添加</button>

    <div id="box1">ssssss</div>
    <script>
        var arr = []
        //随机信息
        var xingArr = ["赵", "钱", "孙", "李", "周", "吴", "郑", "王"]
        var beiArr = "子丑寅卯辰巳午未申酉戌亥";
        var mingArr = "一二三四五六七八九十";
        for (var i = 0; i < 20; i++) {
            var xing = xingArr[parseInt(Math.random() * xingArr.length)]
            var bei = beiArr[parseInt(Math.random() * beiArr.length)]
            var ming = mingArr[parseInt(Math.random() * mingArr.length)]
            var obj = {
                id: i + 1,
                name: xing + bei + ming,
                age: parseInt(Math.random() * 7) + 18,
                sex: Math.random() > 0.5 ? "女" : "男",
                score: parseInt(Math.random() * 101)
            }
            //放入数组
            arr.push(obj)
        }
        //写入页面
        var tbody = document.querySelector("tbody")
        console.log(tbody);
        for (var i = 0; i < arr.length; i++) {
            var obj = arr[i]
            //创建一层 tr
            var tr = document.createElement("tr")
            //向tbody  丢一层tr
            tbody.append(tr)
            for (var j in obj) {
                //循环数组中每一个对象中的每一项,创建td
                var td = document.createElement("td")
                //td 里丢内容 就是对象中每一项的值
                td.append(obj[j])
                // 写入tr
                tr.append(td)
            }
            //创建一项 td  
            var td = document.createElement("td")
            //里面写 删除 
            td.append("删除")
            //丢进去
            tr.append(td)
        }

        //信息 删除 功能
        var del = document.querySelectorAll("td:last-child")
        for (let i = 0; i < del.length; i++) {
            del[i].onclick = function () {
                //找到 删除按钮的父元素 ,删除自身
                del[i].parentElement.remove()
            }
        }


        //信息 添加 功能
        var inputs = document.querySelectorAll("input")
        var add = document.querySelector("button")
        add.onclick = function () {
            //建一个新行
            var tr = document.createElement("tr")
            for (var i = 0; i < inputs.length; i++) {
                //建一个新的td
                var td = document.createElement("td")
                //往td 里添加输入的内容
                td.append(inputs[i].value)
                //吧td 添加到td 里
                tr.append(td)
                inputs[i].value = ""
            }
            var td = document.createElement("td")
            td.append("删除")
            //添加到tr
            tr.append(td)
            //往里面存放一行
            tbody.appendChild(tr)
            //给 删除 添加点击事件
            td.onclick = function () {
                tr.remove()
            }
        }

        //获取排序的点击元素 分数
        var fenshuTh = document.querySelector("th:nth-of-type(5)")
        var isShengXuScore = true;
        fenshuTh.onclick = function () {
            //获取 所有行
            var trs = document.querySelectorAll("tbody tr")
            console.log(trs);
            //创建数组 接收伪数组
            var arr1 = Array.from(trs)
            //排序
            arr1.sort(function (a, b) {
                var aScore = +a.querySelector("td:nth-of-type(5)").innerHTML
                var bScore = +b.querySelector("td:nth-of-type(5)").innerHTML
                return isShengXuScore ? bScore - aScore : aScore - bScore;
            })
            //清空页面 并 重新写入
            tbody.innerHTML = ""
            for (var i in arr1) {
                tbody.appendChild(arr1[i])
            }
            //取反 先升序  后降序
            isShengXuScore = !isShengXuScore
        }

        // 获取排序的点击元素 年龄
        var ageTh = document.querySelector("th:nth-of-type(3)")
        var isShengXuAge = true;
        ageTh.onclick = function () {
            //获取 所有行
            var trs = document.querySelectorAll("tbody tr")
            console.log(trs);
            //创建数组 接收伪数组
            var arr1 = Array.from(trs)
            //排序
            arr1.sort(function (a, b) {
                var aAge = +a.querySelector("td:nth-of-type(3)").innerHTML
                var bAge = +b.querySelector("td:nth-of-type(3)").innerHTML
                return isShengXuAge ? bAge - aAge : aAge - bAge;
            })
            //清空页面 并 重新写入
            tbody.innerHTML = ""
            for (var i in arr1) {
                tbody.appendChild(arr1[i])
            }
            //取反 先升序  后降序
            isShengXuAge = !isShengXuAge
        }

    </script>
</body>

</html>